<template>
  <CommonCard title="今日销售额" :value="salesToday | numberFormat" class="today-sales">
    <template>
      <div class="compare-warp">
        <div class="compare">
          <div>日同比</div>
          <div class="number">{{ salesGrowthLastDay }}</div>
          <div :class="salesGrowthLastDay > 0 ? 'increment' : 'decrement'"></div>
        </div>

        <div class="compare">
          <div>月同比</div>
          <div class="number">{{salesGrowthLastMonth}}</div>
          <div :class="salesGrowthLastDay < 0 ? 'increment' : 'decrement'"></div>
        </div>
      </div>
    </template>
    <template #bottom>
      <span>昨日销售额</span>
      <span class="number">{{salesLastDay | moneyFormat}}</span>
    </template>
  </CommonCard>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TodaySales",
  computed: {
    ...mapState({
      salesToday: (state) => state.data.reportData.salesToday,
      salesLastDay: (state) => state.data.reportData.salesLastDay,
      salesGrowthLastDay: (state) => state.data.reportData.salesGrowthLastDay,
      salesGrowthLastMonth: (state) =>
        state.data.reportData.salesGrowthLastMonth,
    }),
  },
};
</script>

<style lang="scss" scoped>
.today-sales {
  .compare-warp {
    height: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    .compare {
      display: flex;
      padding: 5px 0;
      align-items: center;
    }
  }
}
</style>
